<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="top-bar flex-row">
            <navigator :class="['flex-grow-1', data.status==0?'active':'']" openType="redirect" url="/pages/coupon/coupon?status=0">
                <text>未使用</text>
            </navigator>
            <navigator :class="['flex-grow-1', data.status==1?'active':'']" openType="redirect" url="/pages/coupon/coupon?status=1">
                <text>已使用</text>
            </navigator>
            <navigator :class="['flex-grow-1', data.status==2?'active':'']" openType="redirect" url="/pages/coupon/coupon?status=2">
                <text>已过期</text>
            </navigator>
        </view>
        <view class="coupon-list" v-if="data.list&&data.list.length>0">
            <block v-for="(coupon,index) in data.list" :key="index">
                <view :class="['coupon-item', 'coupon-status-'+coupon.status]" style="margin-top:20upx;">
                    <image class="coupon-bg" :src="'/static/images/img-coupon-bg-'+(coupon.status==0?'0':'1')+'.png'"></image>
                    <image class="coupon-status-icon" :src="'/static/images/img-coupon-status-icon-'+coupon.status+'.png'" v-if="coupon.status!=0"></image>
                    <view class="flex-row" style="height: 100%;overflow: hidden;position:relative">
                        <view class="flex-grow-0 flex-col flex-y-center flex-x-center coupon-left">
                            <view class="flex-row flex-y-bottom">
                                <view class="fs-sm">￥</view>
                                <view :style="{fontSize: coupon.sub_price.length>4?'13':'19'+'pt',lineHeight: '.9'}">
                                    {{coupon.sub_price}}
                                </view>
                            </view>
                            <view class="fs-sm" style="margin-top: 10upx">{{coupon.min_price_desc}}</view>
                        </view>
                        <view class="flex-grow-1 flex-y-center coupon-right">
                            <view style="width:100%;">
                                <navigator openType="navigate" :url="'/pages/coupon-detail/coupon-detail?user_coupon_id='+coupon.user_coupon_id">
                                    <view class="flex-row flex-y-center mb-10" style="margin-bottom:5upx;">
                                        <view class="flex-grow-1">{{coupon.event_desc}}</view>
                                    </view>
                                    <view class="fs-sm" style="color: #666666; font-size: 8pt;">{{coupon.begin_time}} ~ {{coupon.end_time}}</view>
                                    <text class="user_coupon_font" v-if="coupon.appoint_type==1&&coupon.cat.length==0">全场通用</text>
                                    <text class="user_coupon_font" v-if="coupon.appoint_type==2&&coupon.goods.length==0">全场通用</text>
                                    <text class="user_coupon_font" v-if="coupon.appoint_type==null">全场通用</text>
                                </navigator>
                                <block v-if="coupon.appoint_type==1&&coupon.cat.length>0">
                                    <view class="user_coupon_font" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:87%;">
                                    仅限<text v-for="(cat,i) in coupon.cat" :key="id">{{cat.name}}、</text>产品使用
                                    </view>
                                    <block v-if="coupon.cat.length>2">
                                        <image @tap="xia" class="xia" :data-index="i" :src="data.__wxapp_img.user.coupon_xia.url" v-if="i!=data.check"></image>
                                        <image @tap="shou" class="xia" :data-index="i" :src="data.__wxapp_img.dapp.shou.url" v-if="i==data.check"></image>
                                    </block>
                                </block>
                                <view @tap="goodsList" class="user_coupon_font" :data-goods_id="coupon.goods" :data-id="coupon.user_coupon_id" style="height:50upx;" v-if="coupon.appoint_type==2&&coupon.goods.length>0">指定商品使用 点进去查看指定商品</view>
                            </view>
                        </view>
                    </view>
                </view>
                <block v-if="coupon.cat.length>2">
                    <view class="user_coupon" style="padding:10upx 24upx;background:#fff;" v-if="check==i">
                            仅限<text v-for="(cat,i) in coupon.cat" :key="id">{{cat.name}}、</text>产品使用
                        </view>
                </block>
            </block>
        </view>
        <view style="padding-top: 200upx;color: #888;text-align: center" v-else>暂无相关优惠券</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        list: []
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t), this.setData({
            status: t.status || 0
        }), this.loadData(t);
    },
		methods: {
			loadData: function(t) {
        var a = this;
        myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.coupon.index,
            data: {
                status: a.data.status
            },
            success: function(t) {
                0 == t.code && a.setData({
                    list: t.data.list
                });
            },
            complete: function() {
                a.getApp.core.hideLoading();
            }
        });
    },
    goodsList: function(t) {
        var a = t.currentTarget.dataset.goods_id, s = t.currentTarget.dataset.id, e = this.data.list;
        for (var i in e) if (parseInt(e[i].user_coupon_id) === parseInt(s)) return void (2 == e[i].appoint_type && e[i].goods.length > 0 && myVue.getApp.core.navigateTo({
            url: "/pages/list/list?goods_id=" + a
        }));
    },
    xia: function(t) {
        var a = t.target.dataset.index;
        this.setData({
            check: a
        });
    },
    shou: function() {
        this.setData({
            check: -1
        });
    }
		},
	}
</script>

<style scoped>
.top-bar {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1upx solid #e3e3e3;
    border-bottom: 1upx solid #e3e3e3;
    z-index: 999;
}

.top-bar navigator {
    text-align: center;
}

.top-bar navigator text {
    height: 90upx;
    line-height: 90upx;
    border-bottom: 2upx solid transparent;
    width: auto;
    display: inline-block;
}

.top-bar navigator.active text {
    color: #ff4544;
    border-bottom-color: #ff4544;
}

.coupon-list {
    padding: 122upx 34upx 20upx 34upx;
}

.coupon-list .coupon-item {
    height: 152upx;
    width: 682upx;
    position: relative;
    z-index: 10;
}

.coupon-list .coupon-item.coupon-status-1 .coupon-right,.coupon-list .coupon-item.coupon-status-2 .coupon-right {
    color: rgba(0,0,0,.35)!important;
}

.coupon-list .coupon-item .coupon-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.coupon-list .coupon-item .coupon-status-icon {
    width: 140upx;
    height: 98upx;
    position: absolute;
    top: 0;
    right: 8upx;
    z-index: 1;
}

.coupon-list .coupon-item .coupon-left {
    color: #fff;
    width: 202upx;
}

.coupon-list .coupon-item .coupon-right {
    padding: 20upx 10upx;
}

.user_coupon_font {
    color: #666666;
}

.user_coupon {
    color: #666666;
}

.xia {
    position: absolute;
    width: 28upx;
    height: 28upx;
    right: 15px;
    bottom: 9px;
}
</style>
